<template>
  <div class="video-card" @click="watchVideo(videoInfo)">
    <img v-if="videoInfo.liveStatus==1" class="live-flag" src="http://p2ebqp10o.bkt.clouddn.com/live.png">
    <img class="poster" :src="videoInfo.livePoster">
    <p>{{videoInfo.liveTitle}}</p>
  </div>
</template>
<script>
  export default {
    name: "videoCard",
    props: ['videoInfo'],
    data() {
      return {};
    },
    methods: {
      watchVideo(item) {
        this.$store.dispatch('saveVideoInfo', item);
        this.$router.push({
          path: 'videoRoom'
        })
      },
    }
  };

</script>
<style lang="scss">
  @import "../../assets/css/vars.scss";

  .video-card {
    position: relative;
    width: 46vw;
    height: $minVideoHeight;
    img {
      &.poster {
        width: 100%;
        height: 100%;
      }
      &.live-flag {
        position: absolute;
        width: 20%;
        right: 0;
      }
    }
    p {
      position: absolute;
      bottom: 0;
      text-align: center !important;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      margin: 0;
      color: white;
    }
  }

</style>
